<template>
  <div class="balanceDetail" :class="isShow ? 'empty' : ''">
    <md-scroll-view
      ref="scrollView"
      :scrolling-x="false"
      :auto-reflow="true"
      @endReached="onEndReached"
      @refreshing="onRefresh"
    >
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <md-result-page
        v-show="isShow"
        style="margin-top: 30px"
        text="暂无明细"
      ></md-result-page>
      <div class="line" v-for="(item, key) in data" :key="key">
        <div class="title">
          <p>{{ item.remark }}</p>
          <p>{{ item.create_time }}</p>
        </div>
        <p>
          {{ addOrSubtract(item.type)
          }}<md-amount
            :value="parseFloat(item.money)"
            has-separator
          ></md-amount>
        </p>
      </div>
      <md-scroll-view-more
        slot="more"
        :is-finished="isFinished"
        finished-text="已经到底啦~"
      >
      </md-scroll-view-more>
    </md-scroll-view>
  </div>
</template>

<script>
import {
  Amount,
  ResultPage,
  Icon,
  Popup,
  PopupTitleBar,
  ScrollView,
  ScrollViewMore,
  ScrollViewRefresh
} from "mand-mobile";
export default {
  name: "login",
  components: {
    [Amount.name]: Amount,
    [ResultPage.name]: ResultPage,
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  data() {
    return {
      isShow: false,
      data: "",
      curpage: 0,
      sort_type: null,
      search_key: null,
      isFinished: false
    };
  },
  methods: {
    onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getInfo();
    },
    onRefresh() {
      this.$nextTick(() => {
        this.curpage = 1;
        this.isFinished = false;
        this.getInfo(true);
      });
    },
    getInfo(refresh) {
      this.$ajax
        .post(this.$api.moneyList, {
          pageNumber: this.curpage,
          pageSize: 15,
          type: ""
        })
        .then(res => {
          if (refresh) {
            this.data = res.data.data;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.data.push.apply(this.data, res.data.list);
          }
          if (this.curpage === res.data.total_page) {
            this.isFinished = true;
          }
          if (this.data.length === 0) {
            this.isShow = true;
          }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    addOrSubtract(val) {
      if (val === 2) {
        return "-";
      } else if (val === 1) {
        return "+";
      } else if (val === 3) {
        return "+";
      }
    }
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  }
};
</script>

<style scoped lang="stylus">
  .balanceDetail{
    height 100%
  }
.line{
  display flex;
  justify-content space-between;
  color #333333;
  padding 29px 23px 28px 24px;
  background-color #ffffff;
  border-bottom 2px solid #E6E6E6;
  align-items center;
}
.title>p:first-child{
  font-size 26px;
  margin-bottom 16px;
}
.title>p:last-child{
  font-size 20px;
}
.line>p{
  font-size 28px;
}
.hint{
  font-size 30px;
  text-align center;
  padding-top 80px;
}
</style>
